"use client";
import * as Tabs from "@radix-ui/react-tabs";
import { useCustomFetch } from "@/utils/network";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { InductiveProduct } from "./config";
import { useRouter } from "next/navigation";
export default function ProductDetail({ params, searchParams }: any) {
  const t = useTranslations("product-info");
  const [data, setData] = useState<any>({});
  const [currentKeyList, setCurrentKeyList] = useState<string[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [currentValue, setCurrentValue] = useState(t("tab1"));
  const router = useRouter();
  async function GetProductData(id: string) {
    const res = await useCustomFetch(
      `/product?Type=${params.args[1]}&Series=${params.args[2]}&Name=${params.args[3]}`
    );
    let data1 = res.data[0];
    if (data1) {
      if (data1.Language != params.locale) {
        if (!data1[params.locale]) {
          router.push(`/${params.locale}/product`);
          return;
        }
        router.push(data1[params.locale]);
        return;
      }
      data1.Cover = JSON.parse(data1.Cover);
      ["Document", "Model3D", "ConnectLine", "DimensionDrawing", "Certificate", "SafeIcon"].forEach(key => {
        if (data1[key].length > 0 ) {
          data1[key] = JSON.parse(data1[key]);
        } else {
          data1[key] = [];
        }
      })
      setData({ ...data1 });
    }
  }
  function handleToggleImgClick(operate: "pre" | "next") {
    const length = data.Cover.length;
    if (operate === "pre") {
      if (currentIndex - 1 < 0) {
        setCurrentIndex(length);
        return;
      }
      setCurrentIndex(currentIndex - 1);
    } else {
      if (currentIndex + 1 >= length) {
        setCurrentIndex(0);
        return;
      }
      setCurrentIndex(currentIndex + 1);
    }
  }
  useEffect(() => {
    GetProductData(searchParams.name);
  }, [searchParams]);
  useEffect(() => {
    const keys = Object.keys(data);
    setCurrentKeyList(keys);
  }, [data]);
  return (
    <div className="max-w-7xl px-2 mx-auto">
      <div className="flex mt-6 overflow-hidden">
        <div className="w-[45%]  group select-none relative">
          <ul className="border overflow-hidden relative h-96 w-full flex justify-center items-center">
            {data.Cover?.map((item: any, index: number) => {
              return (
                <li
                  style={{
                    opacity: currentIndex == index ? 1 : 0,
                  }}
                  className={`absolute transition-all duration-700 h-[95%] opacity-0`}
                  key={item.url}
                >
                  <img
                    className="w-full h-full"
                    width={370}
                    height={400}
                    src={item.url}
                    alt={item.filename}
                  />
                </li>
              );
            })}
          </ul>
          {/* 手动切换轮播图 */}
          <ul className="flex z-50 gap-2 w-full py-1">
            {data.Cover?.map((_: any, index: number) => {
              return (
                <li
                  onClick={() => setCurrentIndex(index)}
                  style={{
                    borderColor:
                      currentIndex == index ? "rgb(37 ,99 ,235 )" : "",
                  }}
                  className="px-3 py-[2px] rounded border-2 cursor-pointer"
                  key={index}
                >
                  <img
                    className="w-14 h-14 "
                    src={_.url}
                    alt={_.filename}
                    width={50}
                    height={50}
                  ></img>
                </li>
              );
            })}
          </ul>
          {/* 按钮切换轮播图 */}
          <svg
            onClick={() => handleToggleImgClick("pre")}
            className="opacity-0 transition-all absolute text-gray-400 group-hover:opacity-100 hover:text-black top-1/2 left-3 -translate-y-1/2 cursor-pointer"
            width="30"
            height="30"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            ></path>
          </svg>
          <svg
            onClick={() => handleToggleImgClick("next")}
            className="opacity-0 transition-all absolute text-gray-400 group-hover:opacity-100 hover:text-black  top-1/2 right-3 -translate-y-1/2 cursor-pointer"
            width="30"
            height="30"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            ></path>
          </svg>
        </div>
        <div className="flex-1 px-10">
          <h1 className="text-3xl font-semibold py-3 border-b-2">
            {data.Name}
          </h1>
          <p className="py-2">
            {t("series")}： {data.Series}
          </p>
          <p className="py-5">{data.Desc}</p>
          <button
            onClick={() => {
              router.push(`/${params.args[0]}/contact`);
            }}
            className="group hover:text-white cc px-10 py-4 border rounded overflow-hidden mt-2 flex items-center"
          >
            {t("connect")}
            <svg
              width="18"
              height="18"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              ></path>
            </svg>
          </button>
        </div>
      </div>
      <Tabs.Root
        onValueChange={(value) => setCurrentValue(value)}
        className="py-3"
        defaultValue={t("tab1")}
      >
        <Tabs.List className="border-b-2 flex items-center">
          {["tab1", "tab2", "tab3",  "tab5", "tab6"].map((item) => {
            return (
              <Tabs.Trigger
                key={item}
                className={`
              w-1/6 
              py-3
              border-white 
              ${currentValue == t(item) && "hover-bottom-line-v2"}
              `}
                value={t(item)}
              >
                {t(item)}
              </Tabs.Trigger>
            );
          })}
        </Tabs.List>
        <Tabs.Content className="min-h-screen" value={t("tab1")}>
          <ul className="w-2/3 mt-12 text-xl">
            {currentKeyList.map((item) => {
              return (
                InductiveProduct[item] &&
                data[item] && (
                  <li
                    className=" odd:bg-gray-200 even:bg-white flex py-3 items-center justify-center"
                    key={item}
                  >
                    <div className="w-1/2 text-center font-semibold">
                      {t(item)}
                    </div>
                    <div className="w-1/2 text-left">{data[item]}</div>
                  </li>
                )
              );
            })}
          </ul>
        </Tabs.Content>
        <Tabs.Content className="min-h-screen" value={t("tab2")}>
          <ul className={"flex gap-2 py-3"}>
            {data.Document &&
              data.Document.map((item: any) => (
                <li
                  key={item.url}
                  title={item.filename}
                  className={"border-2 w-1/5 text-center rounded-md p-2"}
                >
                  <img
                    width={150}
                    height={150}
                    className={"mx-auto"}
                    src="http://i18nport.dongsongkeji.com.cn/upload/3346c4c3-c2a3-53ad-958a-ce029b95b21e.png"
                    alt=""
                  />
                  <div className={"truncate"}>{item.filename}</div>
                  <div
                    className={"flex my-1 gap-2 items-center justify-center"}
                  >
                    <a
                      target="_blank"
                      download
                      href={item.url + "?down=" + new Date()}
                      className={"border-2 px-6 py-2 hover-bottom-line"}
                    >
                      下载
                    </a>
                    <a
                      className={"border-2 px-6 py-2 hover-bottom-line"}
                      target={"_blank"}
                      href={item.url}
                    >
                      预览
                    </a>
                  </div>
                </li>
              ))}
          </ul>
        </Tabs.Content>
        <Tabs.Content className="min-h-screen" value={t("tab3")}>
          <ul className={"flex gap-2 py-3"}>
            {data.Model3D &&
              data.Model3D.map((item: any) => (
                <li
                  key={item.url}
                  className={"border-2 w-1/5 text-center rounded-md p-2"}
                >
                  <img
                    width={150}
                    height={150}
                    className={"mx-auto"}
                    src="http://i18nport.dongsongkeji.com.cn/upload/3346c4c3-c2a3-53ad-958a-ce029b95b21e.png"
                    alt=""
                  />
                  <div className={"truncate"}>{item.filename}</div>
                  <div
                    className={"flex my-1 gap-2 items-center justify-center"}
                  >
                    <a
                      target="_blank"
                      download
                      href={item.url + "?down=" + new Date()}
                      className={"border-2 px-6 py-2 hover-bottom-line"}
                    >
                      下载
                    </a>
                    <a
                      className={"border-2 px-6 py-2 hover-bottom-line"}
                      target={"_blank"}
                      href={item.url}
                    >
                      预览
                    </a>
                  </div>
                </li>
              ))}
          </ul>
        </Tabs.Content>

        <Tabs.Content className="min-h-screen" value={t("tab5")}>
          <div className={"flex justify-between py-2 flex-wrap"}>
            {data.DimensionDrawing?.map((item: any) => (
              <img
                key={item.url}
                src={item.url}
                alt={item.filename}
                width={600}
                className={"w-3/4 mb-2 mx-auto"}
                height={500}
              ></img>
            ))}
          </div>
        </Tabs.Content>
        <Tabs.Content className="min-h-screen" value={t("tab6")}>
          {data.ConnectLine?.map((item: any) => (
            <img
              key={item.url}
              src={item.url}
              alt={item.filename}
              width={600}
              className={"w-3/4 mb-2 mx-auto"}
              height={500}
            ></img>
          ))}
        </Tabs.Content>
      </Tabs.Root>
    </div>
  );
}
